<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-29 16:00:49
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-05-31 10:52:13
 * @FilePath: \driving-training-admin\src\views\dictManagement\Index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="page-box">
        <TemplateVue
            :page="data.pageData"
            @search="data.onSearch"
            @reset="data.onReset"
            @paginationChange="data.onPaginationChange"
            @paginationSize="data.onPaginationSize"
            @operation="data.onOperation"
        >
        </TemplateVue>
        <div class="operation">
            <el-button @click="data.onGoBack">返回</el-button>
        </div>

        <BasicDialogVue :data="data.dialog" @close="data.onCloseDialog(ruleFormRef)">
            <template #content>
                <div class="">
                    <el-form ref="ruleFormRef" :rules="data.dictRules" :model="data.dictForm" label-width="auto">
                        <el-form-item label="名称：" prop="name">
                            <el-input v-model="data.dictForm.name" v-if="Number(data.dictType) === 1" />
                            <el-select
                                v-model="data.dictForm.name"
                                filterable
                                allow-create
                                default-first-option
                                placeholder="请选择"
                                v-else
                            >
                                <el-option
                                    :label="item.value"
                                    :value="item.value"
                                    v-for="item in DICT_DATA.get('cityCode')"
                                    :key="item.value"
                                >
                                    {{ item.label }}
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="值类型：" v-if="Number(data.dictType) === 2">
                            <el-radio-group v-model="data.dictForm.valType">
                                <el-radio label="1">字符串</el-radio>
                                <el-radio label="2">对象</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="字典值：" prop="value">
                            <el-input v-model="data.dictForm.value" v-if="Number(data.dictForm.valType) === 1" />
                            <JsonEditorVue
                                v-model="data.dictForm.jsonVal"
                                v-else-if="Number(data.dictForm.valType) === 2 && Number(data.dictType) === 2"
                                style="width: 100%"
                            />
                        </el-form-item>
                        <el-form-item label="字典颜色" prop="color">
                            <el-select v-model="data.dictForm.color" placeholder="请选择" style="margin-right: 10px">
                                <el-option
                                    :label="item.value"
                                    :value="item.value"
                                    v-for="item in colorType"
                                    :key="item.value"
                                >
                                    <div class="color-box">
                                        <span
                                            class="color-item"
                                            :style="{ backgroundColor: item.value }"
                                            style="margin-right: 8px"
                                        ></span>
                                        <span :style="{ color: item.value }">{{ item.value }}</span>
                                    </div>
                                </el-option>
                            </el-select>
                            <el-color-picker v-model="data.dictForm.color" />
                        </el-form-item>
                        <el-form-item label="排序：">
                            <el-input-number v-model="data.dictForm.sortOrder" :min="0" />
                        </el-form-item>
                        <el-form-item label="描述">
                            <el-input v-model="data.dictForm.desc" type="textarea" />
                        </el-form-item>
                        <el-form-item>
                            <div style="width: 100%; display: flex; justify-content: center">
                                <el-button type="primary" @click="data.submitForm(ruleFormRef)">确定</el-button>
                                <el-button @click="data.onCloseDialog(ruleFormRef)">取消</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
        </BasicDialogVue>
    </div>
</template>
<script setup lang="ts">
import TemplateVue from '@/components/template/Index.vue'
import DictItemData from '.'
import { reactive, ref } from 'vue'
import BasicDialogVue from '@/components/baseDialog/Index.vue'
import { colorType, DICT_DATA } from '@/utils/dict-data'
import JsonEditorVue from 'json-editor-vue'
import { dictType } from '@/utils/dict-data copy'

const data = reactive(new DictItemData())
const ruleFormRef = ref()
const valType = ref('1')
</script>

<style scoped lang="scss">
.time {
    display: flex;
}
.btn {
    display: flex;
    justify-content: center;
    margin: 40px 0 16px 0;
}
.color-box {
    display: flex;
    align-items: center;
}
.color-item {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: block;
    margin-right: 16px;
}
.operation {
    display: flex;
    justify-content: center;
    background-color: #fff;
    padding-bottom: 16px;
}
</style>
